<!DOCTYPE html	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="/template/template.xhtml">
	<ui:define name="content">
		<div class="nav-tabs-custom full-center-content-scroll-noheader">
			<!-- Tabs within a box -->
			<ul class="nav nav-tabs pull-left">
				<li class="active"><a href="#protectPanel" data-toggle="tab">保护动作时间</a></li>
				<li><a href="#breakerPanel" id="breakerTab" data-toggle="tab">断路器动作时间</a></li>
			</ul>
			<div class="tab-content no-padding">
				<div class="chart tab-pane active" id="protectPanel" style="position: relative">
					<div id="protectTimeLine" class="col-sm-12 col-lg-12">
						<div id="protectTimeLine1" style="height: 50px"></div>
					</div>
					<div class="col-sm-12 col-lg-12">
						<div style="height: 50px"></div>
					</div>
					<div class="col-sm-6 col-lg-6">
						<div id="protectChart5" style="height: 250px"></div>
					</div>
					<div class="col-sm-6 col-lg-6">
						<div id="protectPie1" style="height: 250px"></div>
					</div>
					<div class="nav-tabs-custom">
						<!-- Tabs within a box -->
						<ul class="nav nav-pills pull-left">
							<li class="active"><a href="#protectAreaPanel"  data-toggle="tab">单位</a></li>
							<!-- <li><a href="#protectCompPanel" id="protectComTab" data-toggle="tab">厂家</a></li> -->
						</ul>
						<div class="tab-content no-padding">
							<div id="protectAreaPanel" class="chart tab-pane active"
								style="position: relative">
								<div class="col-sm-12 col-lg-12">
									<div id="protectChart3" style="height: 250px"></div>
								</div>
								<div class="col-sm-12 col-lg-12">
									<div id="protectChart4" style="height: 250px"></div>
								</div>
							</div>
							<!-- <div id="protectCompPanel" class="chart tab-pane"
								style="position: relative">
								<div class="col-sm-12 col-lg-12">
									<div id="protectChart1" style="height: 250px"></div>
								</div>
								<div class="col-sm-12 col-lg-12">
									<div id="protectChart2" style="height: 250px"></div>
								</div>
							</div> -->
						</div>
					</div>
				</div>
				<div class="chart tab-pane" id="breakerPanel" style="position: relative">
					<div id="breakerTimeLine" class="col-sm-12 col-lg-12">
						<div id="breakerTimeLine1" style="height: 50px"></div>
					</div>
					<div class="col-sm-12 col-lg-12">
						<div style="height: 50px"></div>
					</div>
					<div class="col-sm-6 col-lg-6">
						<div id="breakerChart5" style="height: 250px"></div>
					</div>
					<div class="col-sm-6 col-lg-6">
						<div id="breakerPie1" style="height: 250px"></div>
					</div>
					<div class="nav-tabs-custom">
						<!-- Tabs within a box -->
						<ul class="nav nav-pills pull-left">
							<li class="active"><a href="#breakerAreaPanel" data-toggle="tab">单位</a></li>
						</ul>
						<div class="tab-content no-padding">
							<div id="breakerAreaPanel" class="chart tab-pane active"
								style="position: relative">
								<div class="col-sm-12 col-lg-12">
									<div id="breakerChart3" style="height: 250px"></div>
								</div>
								<div class="col-sm-12 col-lg-12">
									<div id="breakerChart4" style="height: 250px"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</ui:define>
	<ui:define name="contentend">
		<script src="#{request.contextPath}/resources/plugins/echarts/echarts.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/timeLineChart.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/timeBarChart.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/timePieChart.js"></script>
		<script src="#{request.contextPath}/resources/js/mycharts/categoryBarChart.js"></script>
		<script src="#{request.contextPath}/resources/js/array-util.js"></script>
		<script src="responseFeaCompany.js"></script>
		<script src="responseFeaProtect.js"></script>
		<script src="responseFeaBreaker.js"></script>
		<script>
			var protect = null;
			var breaker = null;
			var company = null;
			$(function() {
				var t1 = window.setInterval(function() {
					var w = $('#protectTimeLine1').width()+"";
					if(w != '0'){
						protect = new initProtect();
						company = new initCompany();
						breaker = new initBreaker();
						window.clearInterval(t1);
					}
				},20);
			});
			$(window).resize(function(){
				protect.resizeChart();
				company.resizeFaultChart();
				company.resizeProtectChart();
				breaker.resizeChart();
			});
			$('#breakerTab').on('click', function() {
				var t1 = window.setInterval(function() {
					var w = $('#breakerPie1').width()+"";
					if(w != '0'){
						breaker.resizeChart();
						window.clearInterval(t1);
					}
				},20);
			});
			$('#protectComTab').on('click', function() {
				var t1 = window.setInterval(function() {
					var w = $('#protectCompPanel').width()+"";
					if(w != '0'){
						company.resizeProtectChart();
						window.clearInterval(t1);
					}
				},20);
			});
		</script>
	</ui:define>
</ui:composition>